// namespace studentPage {


//     // 初始化学生数据：只要数据改变就需要重新渲染表格数据
//     let students = [
//         { id: 1, name: 'Alice', gender: 'Female', hobbies: 'Reading', age: 20 },
//         { id: 2, name: 'Bob', gender: 'Male', hobbies: 'Sports', age: 22 },
//         { id: 3, name: 'Charlie', gender: 'Male', hobbies: 'Gaming', age: 21 }
//     ];
//     let keyword = ''

//     let searchStudents = []
//     const searchBtnEl = document.querySelector('.searchBtn') as Element
//     // 检索数据
//     searchBtnEl.addEventListener('click', function (e) {

//         // 获取检索的值
//         keyword = document.querySelector('[name="keyword"]').value
//         // 如果为空渲染全量数据
//         if (!keyword) {
//             renderTable(students)
//             return
//         }

//         searchStudents = students.filter(item => item.name.includes(keyword))
//         console.log(searchStudents, 'searchStudents');

//         renderTable(searchStudents)

//     })

//     let isEditing = false; // 验证是否是编辑状态 - 默认是添加

//     // 验证手机号  return:boolean
//     function checkIphone(iphone) {
//         let reg = /^(?:(?:\+|00)86)?1\d{10}$/
//         return reg.test(iphone)
//     }
//     // 验证邮箱  return:boolean
//     function checkEmail(email) {
//         let reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
//         return reg.test(email)
//     }

//     // 渲染学生数据到表格 tbody
//     function renderTable(_students) {
//         const tbody = document.querySelector('.studentTable tbody');
//         tbody.innerHTML = ''; // 清空tbody 的学生ui数据效果

//         _students.forEach(student => {
//             const row = document.createElement('tr');

//             row.innerHTML = `
//                     <td><input type="checkbox" onclick="checkBoxSelectedHandler()" class="selectStudent" data-id="${student.id}"></td>
//                     <td>${student.id}</td>
//                     <td>${student.name}</td>
//                     <td>${student.gender}</td>
//                     <td>${student.hobbies}</td>
//                     <td>${student.email || ''}</td>
//                     <td>${student.iphone || ''}</td>
//                     <td>${student.age}</td>
//                      <td>${student.create_at || ''}</td>
//                       <td>${student.update_at || ''}</td>
//                     <td>
//                         <button onclick="openEditModal(${student.id})">Edit</button>
//                         <button onclick="deleteStudent(${student.id})">Delete</button>
//                     </td>
//                 `;

//             tbody.appendChild(row);
//         });
//     }

//     // 实现全选
//     document.querySelector('.selectAll').addEventListener('change', function () {


//         let stuAllLen = students.length

//         let stusAllEl = document.querySelectorAll('.selectStudent')
//         // console.log(stusAllEl);
//         let checkedStuNum = 0
//         stusAllEl.forEach(element => {
//             console.log(element);
//             if (element.checked) {
//                 checkedStuNum++
//             }


//         });

//         let checkStaus = false
//         if (stuAllLen === checkedStuNum) {
//             checkStaus = false
//         } else {
//             checkStaus = true
//         }


//         stusAllEl.forEach(checkbox => {
//             checkbox.checked = checkStaus;
//         });
//     });

//     // 打开表单模态框，并标识为添加操作
//     document.querySelector('.openModalBtn').addEventListener('click', function () {
//         document.querySelector('.modalTitle').textContent = '添加学生';
//         document.querySelector('.studentModal').style.display = 'block';
//         isEditing = false;
//     });


//     function checkBoxSelectedHandler() {

//         let stuAllLen = students.length

//         let stusAllEl = document.querySelectorAll('.selectStudent')
//         // console.log(stusAllEl);
//         let checkedStuNum = 0
//         stusAllEl.forEach(element => {
//             console.log(element);
//             if (element.checked) {
//                 checkedStuNum++
//             }


//         });

//         if (stuAllLen === checkedStuNum) {
//             document.querySelector('.selectAll').checked = true
//         } else {
//             document.querySelector('.selectAll').checked = false
//         }

//         console.log(checkedStuNum);

//         // stusAllEl.filter(item => {
//         //   console.log(item);

//         // })
//     }


//     // 打开编辑表单模态框，找到对应id的学生对象，把学生对象的值赋值给对应的表单value
//     function openEditModal(id) {
//         // 找到当前id 对应的学生数据
//         const student = students.find(s => s.id === id);
//         // 把学生对象的值赋值给对应的表单value
//         if (student) {
//             document.querySelector('.modalTitle').textContent = '修改学生';
//             document.querySelector('.studentIdToEdit').value = student.id;
//             document.querySelector('[name="name"]').value = student.name;
//             document.querySelector('[name="gender"]').value = student.gender;
//             document.querySelector('[name="hobbies"]').value = student.hobbies;
//             document.querySelector('[name="email"]').value = student.email || '';
//             document.querySelector('[name="iphone"]').value = student.iphone || '';
//             document.querySelector('[name="age"]').value = student.age;

//             document.querySelector('.studentModal').style.display = 'block';
//             // 把当前操作标识为 修改操纵
//             isEditing = true;
//         }
//     }

//     // 处理提交的表单数据
//     document.querySelector('.studentForm').addEventListener('submit', function (event) {
//         event.preventDefault(); // 阻止表单默认提交行为

//         // 获取表单提交的数据
//         const formData = new FormData(this);
//         // 把表单提交的数据格式化为对象 例如：{"name": "Alice","gender": "Female","hobbies": "Reading","age": "20"}
//         const data = Object.fromEntries(formData.entries());
//         console.log(data); // 例如：{"name": "Alice","gender": "Female","hobbies": "Reading","age": "20"}


//         // 验证邮箱
//         if (!checkEmail(data.email)) {
//             alert('邮箱格式错误~！')
//             return
//         }


//         // 验证手机
//         if (!checkIphone(data.iphone)) {
//             alert('手机格式错误~！')
//             return
//         }

//         // 单独获取隐藏表单组件的数据 ：用户id
//         const id = document.querySelector('.studentIdToEdit').value;

//         // 判断所有的数据是否输入完整
//         if (data.name && data.gender && data.hobbies && data.age) {
//             // 判断是否是更新操作
//             if (isEditing) {
//                 // 更新数据
//                 const student = students.find(s => s.id === parseInt(id));
//                 if (student) {
//                     student.name = data.name;
//                     student.gender = data.gender;
//                     student.hobbies = data.hobbies;
//                     student.email = data.email;
//                     student.iphone = data.iphone;
//                     student.update_at = getFormattedCurrentDateTime();
//                     student.age = parseInt(data.age);
//                 }
//                 isEditing = false;
//             } else {
//                 // 添加一条新数据
//                 students.push({
//                     id: students.length ? students[students.length - 1].id + 1 : 1,
//                     name: data.name,
//                     gender: data.gender,
//                     hobbies: data.hobbies,
//                     email: data.email,
//                     iphone: data.iphone,
//                     create_at: getFormattedCurrentDateTime(),
//                     update_at: getFormattedCurrentDateTime(),
//                     age: parseInt(data.age)
//                 });
//             }

//             // 重新渲染数据到页面：tbody
//             if (keyword) {
//                 renderTable(searchStudents);
//             } else {
//                 renderTable(students);
//             }
//             // 修改或添加数据后 更新新的数据到缓存
//             setStudentsDataCache()

//             // 关闭模态框
//             document.querySelector('.studentModal').style.display = 'none';
//             clearModal();
//         } else {
//             alert('请填充所有的字段');
//         }
//     });

//     // 初始化表单的值，重置表单
//     function clearModal() {
//         document.querySelector('.studentForm').reset();
//         document.querySelector('.studentIdToEdit').value = '';
//     }

//     // 删除对应id的学生数据
//     function deleteStudent(id) {
//         const index = students.findIndex(s => s.id === id);
//         if (index !== -1) {
//             students.splice(index, 1);
//             // 重新渲染学生数据到tbody
//             if (keyword) {
//                 renderTable(searchStudents);
//             } else {
//                 renderTable(students);
//             }

//         }
//     }


//     // 初始化渲染数据到ui

//     // 判断缓存数据是否有值
//     if (getStudentsDataCache()) {
//         students = getStudentsDataCache()
//     }

//     console.log(getStudentsDataCache());

//     renderTable(students);
//     setStudentsDataCache()

//     // 关闭模块框
//     window.onclick = function (event) {
//         const modal = document.querySelector('.studentModal');
//         if (event.target === modal) {
//             modal.style.display = 'none';
//             clearModal();
//         }
//     };


//     function getFormattedCurrentDateTime() {
//         const now = new Date();
//         const year = now.getFullYear();
//         const month = String(now.getMonth() + 1).padStart(2, '0');
//         const day = String(now.getDate()).padStart(2, '0');
//         const hours = String(now.getHours()).padStart(2, '0');
//         const minutes = String(now.getMinutes()).padStart(2, '0');
//         const seconds = String(now.getSeconds()).padStart(2, '0');

//         return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
//     }

//     // 把数据存入到localStorage
//     function setStudentsDataCache() {
//         localStorage.setItem('student-data', JSON.stringify(students))
//     }


//     function getStudentsDataCache() {

//         let lstuData = localStorage.getItem('student-data')
//         if (!lstuData) {
//             return false
//         }
//         // console.log(localStorage.getItem('student-data'), 'localStorage.getItem(\'student - data\')');

//         return JSON.parse(localStorage.getItem('student-data'))
//     }

//     // 示例用法
//     // console.log(getFormattedCurrentDateTime()); // 输出: 2024-08-14 12:34:56

//     // 0. 搞懂每一行代码 ，打上注释
//     // 1. 修正模态框布局样式和整体bug样式，尽量让按钮 Input框美观些（1）提示：盒子模型计算
//     // 2. 学生信息增加手机号和邮箱字段列 并在添加和修改的时候验证手机号和邮箱格式-正则
//     // 3. 学生信息增加 创建时间和修改时间列 格式【YYYY-MM-DD HH:mm:ss】
//     // 4. 列表的右上角增加 input框，搜索按钮，可以使用 name 检索数据，无检索关键词直接点击搜索按钮则默认检索所有数据
//     // 5. 讲学生信息存入 localStorage ，使用JSON格式，关闭打开浏览器数据依然在
//     // 6. 多选按钮样式和实际选择数据同步（可放最后）

// }